<div ng-include="'components/navbar/navbar.html'"></div>

<div class="container">
  <section>
    <h1>Sign up</h1>
    <form class="form" name="form" ng-submit="register(form)" novalidate>

      <div class="form-group" ng-class="{ 'has-success': form.name.$valid && submitted,
                                          'has-error': form.name.$invalid && submitted }">
        <label>Name</label>

        <input type="text" name="name" class="form-control" ng-model="user.name"
               required/>
        <p class="help-block" ng-show="form.name.$error.required && submitted">
          A name is required
        </p>
      </div>

      <div class="form-group" ng-class="{ 'has-success': form.phone.$valid && submitted,
                                          'has-error': form.phone.$invalid && submitted }">
        <label>Phone</label>

        <input type="text" name="phone" class="form-control" ng-model="user.phone"
               required/>
        <p class="help-block" ng-show="form.phone.$error.required && submitted">
          A phone is required
        </p>
      </div>

      <div class="form-group" ng-class="{ 'has-success': form.email.$valid && submitted,
                                          'has-error': form.email.$invalid && submitted }">
        <label>Email</label>

        <input type="email" name="email" class="form-control" ng-model="user.email"
               required
               mongoose-error/>
        <p class="help-block" ng-show="form.email.$error.email && submitted">
          Doesn't look like a valid email.
        </p>
        <p class="help-block" ng-show="form.email.$error.required && submitted">
          What's your email address?
        </p>
        <p class="help-block" ng-show="form.email.$error.mongoose">
          {{ errors.email }}
        </p>
      </div>

      <div class="form-group" ng-class="{ 'has-success': form.department.$valid && submitted,
                                          'has-error': form.department.$invalid && submitted }">
        <label>Department</label>
        <select name="department" class="form-control" ng-model="user.department" ng-options="department as department.name for department in departments" required>
          <option value="">---- 选择所属部门 ----</option>
        </select>
        <p class="help-block" ng-show="form.department.$error.required && submitted">
          A department is required.
        </p>
      </div>

      <div class="form-group" ng-class="{ 'has-success': form.job.$valid && submitted,
                                          'has-error': form.job.$invalid && submitted }">
        <label>Job</label>
        <select name="job" class="form-control" ng-model="user.job" required>
          <option value="">---- 选择所属职位 ----</option>
          <option value="普通员工">普通员工</option>
          <option value="部门主管">部门主管</option>
          <option value="总经理">总经理</option>
        </select>
        <p class="help-block" ng-show="form.job.$error.required && submitted">
          A job is required.
        </p>
      </div>

      <div class="form-group" ng-class="{ 'has-success': form.password.$valid && submitted,
                                          'has-error': form.password.$invalid && submitted }">
        <label>Password</label>

        <input type="password" name="password" class="form-control" ng-model="user.password"
               ng-minlength="3"
               required
               mongoose-error/>
        <p class="help-block"
           ng-show="(form.password.$error.minlength || form.password.$error.required) && submitted">
          Password must be at least 3 characters.
        </p>
        <p class="help-block" ng-show="form.password.$error.mongoose">
          {{ errors.password }}
        </p>
      </div>

      <div>
        <button class="btn btn-inverse btn-lg btn-login" type="submit">
          Sign up
        </button>
        <a class="btn btn-default btn-lg btn-register" href="/login">
          Login
        </a>
      </div>

    </form>
    {{user}}
  </section>
  <hr>
</div>
